<template>
  <div class="header flex-between">
    <div class="meetingnum flex-start">
      <img class="lock" src="@/assets/cfRoom/images/encrypt.png" alt="" />
      <span class="num" id="num">会议号：{{ cfCode }}</span>
      <div
        class="infoBtn cp"
        tabindex="401"
        @focus.stop="showCfInfo"
        @blur.stop="showCfInfo"
      >
        <img class="copyImg" src="@/assets/cfRoom/images/copy.png" alt="" />
        <ul class="cfInfo" v-show="ifShowCfInfo">
          <li class="infoTit">
            {{ cfName }}
          </li>
          <li class="infoNum flex-start">
            <div class="key">会议号：</div>
            <div class="value">{{ cfCode }}</div>
            <span class="copy cp" @click="tools.copyText(cfCode)">复制</span>
          </li>
          <li class="infoHost flex-start">
            <div class="key">主持人：</div>
            <div class="value">{{ cfSponsor }}</div>
          </li>
          <li class="infoStart flex-start">
            <div class="key">开始时间：</div>
            <div class="value">{{ cfLocalStartTime }}</div>
          </li>
          <!-- <li class="infoLink flex-start">
        <div class="key">会议链接：</div>
        <div class="value">{{'https://app.mockplus.cn/run/prototype/0Bu3yXx0SX/BHFrp'}}</div>
      </li> -->
        </ul>
      </div>
    </div>
    <div class="tittle flex-center">
      <span>{{ cfName }}</span>
    </div>
    <div class="time" v-if="durationOfAttendance">
      <span>{{ cfDurationTime }}</span>
    </div>
    <div v-else class="replace"></div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    // cfCode: {
    //   require: String || Number,
    //   default: '99999'
    // },
    // cfName: {
    //   require: String,
    //   default: 'K1总冠军低调'
    // },
    // cfStartTime: {
    //   require: String,
    //   default: ''
    // }
  },
  data () {
    return {
      // 会议持续时间
      cfDurationTime: '10:20:30',
      // 会议持续时间定时器
      cfInterval: null,
      // 是否显示会议详情
      ifShowCfInfo: false
    }
  },
  computed: {
    // 是否显示会议持续时间
    durationOfAttendance () {
      return this.$store.state.conferenceRoom.conferenceSettings
        .durationOfAttendance
    },
    // 会议主持人名称
    cfSponsor () {
      return this.$store.state.chatInformation.userList[
        this.$store.state.conferenceRoom.cf_sponsor
      ].user_name
    },
    // 会议号
    cfCode () {
      return this.$store.state.conferenceRoom.cf_code
    },
    // 会议名
    cfName () {
      return this.$store.state.conferenceRoom.cf_name
    },
    // 会议开始时间
    cfStartTime () {
      return this.$store.state.conferenceRoom.cf_start_time
    },
    cfLocalStartTime () {
      const startTime = +new Date(this.cfStartTime)
      const offset = new Date().getTimezoneOffset() * 60000
      return moment(startTime - offset).format('yyyy-MM-DD HH:mm:ss')
    }
  },
  methods: {
    // 计算会议持续时间
    setDurationTime () {
      const nowTime = +moment()
      const startTime = +moment(this.cfStartTime)
      const offset = new Date().getTimezoneOffset() * 60000
      const gapTime = nowTime + offset - startTime
      if (gapTime < 0) {
        this.cfDurationTime = '本地时间有误'
        return
      }
      const hours = moment.duration(gapTime).hours() >= 10 ? moment.duration(gapTime).hours() : '0' + moment.duration(gapTime).hours()
      const mins = moment.duration(gapTime).minutes() >= 10 ? moment.duration(gapTime).minutes() : '0' + moment.duration(gapTime).minutes()
      const secs = moment.duration(gapTime).seconds() >= 10 ? moment.duration(gapTime).seconds() : '0' + moment.duration(gapTime).seconds()
      this.cfDurationTime = hours + ':' + mins + ':' + secs
    },
    // 显示会议详情
    showCfInfo () {
      this.ifShowCfInfo = !this.ifShowCfInfo
    }
  },
  created () {
    this.setDurationTime()
    this.cfInterval = setInterval(() => {
      this.setDurationTime()
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.cfInterval)
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 25px;
  width: 100%;
  background: #0c172f;

  .meetingnum {
    height: 44px;

    span {
      margin-left: 4px;
      font-size: 14px;
      line-height: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
    }

    img.lock {
      height: 24px;
    }
    .infoBtn {
      margin-left: 6px;
      height: 16px;
      width: 16px;
      outline: none;
      img.copyImg {
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
      ul.cfInfo {
        width: 480px;
        border-radius: 2px;
        padding: 20px;
        background-color: #fff;
        position: absolute;
        top: 44px;
        left: 156px;
        z-index: 99;
        li {
          margin-top: 16px;
          &:first-child {
            margin-top: 0;
          }
        }
        .copy {
          margin-left: 16px;
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #304eec;
          line-height: 20px;
        }
        .key {
          width: 72px;
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #5f7196;
          line-height: 20px;
          word-break: keep-all;
        }
        .value {
          max-width: 300px;
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          text-align: left;
          color: #0D172C;
          line-height: 20px;
          word-wrap: break-word;
        }
        .infoTit {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #0D172C;
          line-height: 22px;
          margin-bottom: 20px;
        }
      }
    }
  }

  .tittle {
    span {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .time {
    span {
      width: 100%;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
